<template>
  <el-row :gutter="5" class="padding">
    <el-col :span="6"> 
      <xm-epic-features :productRequired="productRequired"
        :xm-product="xmProductCpd"
        :sel-project="selProject"
        @check-change="onEpicFeaturesRowClick"
        @product-selected="onProductSelected"
        @product-clear="onProductClearSelect"
      />
    </el-col>
    <el-col :span="18" v-if="xmProductCpd && xmProductCpd.id">
      <xm-menu-mng :simple="simple"
        :xm-product="xmProductCpd"
        :sel-project="selProject"
        :parent-menu="parentMenu"
        :xm-iteration="xmIteration"
        queryScope="story"
      />
    </el-col>

    <el-col :span="18" v-else-if="product && product.id">
      <xm-menu-mng  :simple="simple"
        :xm-product="product"
        :sel-project="selProject"
        :parent-menu="parentMenu"
        :xm-iteration="xmIteration"
        queryScope="story"
      />
    </el-col>
  </el-row>
</template>

<script>
import util from '@/components/mdp-ui/js/util' //全局公共库

import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'

import XmEpicFeatures from '@/views/xm/core/xmMenu/XmEpicFeatures.vue' //新增界面
import XmMenuMng from '@/views/xm/core/xmMenu/XmMenuMng.vue' //新增界面
export default {
  props: ['xmProduct', 'xmIteration', 'selProject','simple','productRequired'],
  components: {
    XmEpicFeatures,
    XmMenuMng
  },
  computed: {
    ...mapState(useUserStore, ['userInfo', 'roles']),
    xmProductCpd() {
      if (this.xmProduct && this.xmProduct.id) {
        return this.xmProduct
      }
      if (this.xmIteration && this.xmIteration.id && this.xmIteration.productId) {
        return { id: this.xmIteration.productId, productName: this.xmIteration.productName }
      }
      return null
    }
  },
  watch: {},
  data() {
    return {
       product: null,
      parentMenu: null,
    } //end return
  }, //end data
  methods: {
    onEpicFeaturesRowClick(menu, checked) {
      if (checked == false) {
        this.parentMenu = null
      } else {
        this.parentMenu = menu
      }
    },
    onProductSelected(product) {
      this.product = product
      this.parentMenu = null
    },
    onProductClearSelect() {
      this.product = null
      this.parentMenu = null
    }
  }, //end method
  mounted() {
    this.product = { ...this.xmProduct }
    if (this.xmIteration && this.xmIteration.id) {
      if (!this.xmProduct || !this.xmProduct.id) {
        this.product = {
          id: this.xmIteration.productId,
          productName: this.xmIteration.productName
        }
      }
    }
  } //end mounted
}
</script>

<style lang="less" scoped />
